<template>
  <div class="container">
    <div class="pop-close" @click.stop="$parent.aboutShow=false">
        <van-icon name="cross" />
    </div>
    <div class="block-content">
      <div class="swiper-content">
        <div class="swiper-item" v-for="(item, index) in LandC" :key="index" @click="aboutLAndC(item.imgUrl)">
          <img :src="item.imgUrl" alt="" class="swiper-img">
        </div>
      </div>
      <div class="title">关于歪fChat</div>
      <div class="introduce">&nbsp;&nbsp;歪fChat是一款即时聊天软件, 技术栈: Vue2 + Socket.IO + NodeJS(Express)进行开发。</div>
      <div class="title">声明</div>
      <div class="introduce">&nbsp;&nbsp;该即时聊天软件不会涉及到个人隐私问题，请放心使用，注册的手机号只做了正则校验，无其他影响</div>
      <div class="surprise">
        <div class="surprise-title">联系我</div>
        <div class="contact">如果您有任何问题或者意见，欢迎添加以下联系方式和我进行讨论👏</div>
        <div class="contact">微信：xiaotianna666</div>
        <div class="contact">抖音：wifi歪f</div>
      </div>
      <div class="love">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb3ZlIjoiY3lmIiwiaWF0IjoxNjgzMDk5NDExLCJleHAiOjE2ODMwOTk0NzF9.238AP6FLOKnwzzhJOxlfxSMAwcoXMqiqKXmQc5tLv9M</div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
export default {
  data() {
    return {
      LandC: [
        {imgUrl: './images/he.jpeg'},
        {imgUrl: './images/me.jpeg'}
      ]
    }
  },
  methods: {
    aboutLAndC(imgUrl) {
      ImagePreview({
        images: [imgUrl],
        closeable: true,
        showIndex: false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
    width: 8rem;
    position: relative;
}
.pop-close {
    width: .9333rem;
    height: .9333rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .3);
    position: absolute;
    top: .2667rem;
    right: .2667rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: .4rem;
}
.block-content {
  width: 100%;
  font-size: 0.3467rem;
  padding-bottom: .1333rem;
  img {
    width: 100%;
  }
  .title {
    width: 100%;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.4rem;
    margin-top: .2667rem;
  }
  .introduce {
    padding: .2667rem;
    box-sizing: border-box;
    line-height: .5333rem;
  }
  .surprise {
    padding: 0 .2667rem;
    box-sizing: border-box;
    .surprise-title {
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        text-align: center;
        font-weight: 700;
        font-size: 0.4rem;
        margin: .2667rem 0;
    }
    .login-video {
        width: 100%;
        video {
            width: 100%;
            height: 100%;
        }
        img {
            width: 100%;
            height: 100%;
            margin: .1333rem 0;
        }
    }
  }
}
.swiper-content {
  width: 100%;
  height: 4rem;
  display: flex;
  .swiper-item {
    width: 80%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.contact {
  box-sizing: border-box;
  line-height: .5333rem;
}
.love {
    display: none;
    color: #fff;
}
</style>
